<template>
      <div style="display:grid; justify-content: center; align-items: center; height: auto;">
        <van-image
          round
          width="19rem"
          height="14rem"
          :src="logo"
        />
      </div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="userAccount"
            name="userAccount"
            label="账号"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
            v-model="userPassword"
            type="password"
            name="userPassword"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
      
      <van-row justify="space-between">
        <van-col span="0.5"></van-col>
        <van-col span="10"><a @click="userRegister" class="a-gray">没有账号？去注册</a></van-col>
        <van-col span="7"></van-col>
        <van-col span="4" style="text-align: right;"><a @click="reSetPwd" class="a-gray">忘记密码</a></van-col>
        <van-col span="0.5"></van-col>
    </van-row>
    </van-form>
  </template>
  
  <script setup lang="ts">
  
  import myAxios from "../plugins/myAxios.ts";
  import {showFailToast, showSuccessToast} from "vant/lib/vant.es";
  import {ref} from "vue";
  import {useRoute, useRouter} from "vue-router";
  import logo from "../assets/Buddy-Resonance.png"

  const router = useRouter();
  const route = useRoute();
  
  const userAccount = ref('');
  const userPassword = ref('');
  
  // 跳转到加入队伍页
  const userRegister =() =>{
      router.push({
          path: "/user/register"
      })
  }

  const reSetPwd =() =>{
    router.push({
      path: "/user/password"
    })
  }

  const onSubmit = async () => {
    // console.log("用户登录");
    const res = await myAxios.post("/user/login", {
      userAccount: userAccount.value,
      userPassword: userPassword.value
    });
    console.log(res, '用户登录')
    if (res.code == 0 && res.data != null) {
      showSuccessToast("登录成功");
      // 跳转到之前的页面
      const redirectUrl = route.query?.redirect?? '/';
      window.location.href = redirectUrl;
    } else {
      showFailToast("登录失败");
    }
  };
  
  </script>
  
  <style scoped>
    .a-gray {
      font-size: 0.9rem;
      text-decoration: none;
      color: gray;
    }
  </style>